<!--
 * @Author: 王庆庆
 * @Date: 2024-11-09 10:34:06
 * @LastEditors: 王庆庆
 * @LastEditTime: 2025-02-10 17:51:16
 * @Description: 
 * 
-->
<template>
  <div class="loginBase">
    <el-tree-select
      :filter-node-method="filterMethod"
      :default-expand-all="true"
      v-model="selectResult"
      @node-click="handleCheckChange"
      :data="listTree"
      :props="defaultProps"
      filterable
    />
    <!-- <el-button
			type="primary"
			size="mini"
			class="btnItem flex-both-center pointer"
			style="margin-top: 10px"
			@click="treeState = !treeState">
			{{ treeState ? "按钮模式" : "树模式" }}
		</el-button> -->

    <div class="scrollbar-y-bigscreen tree-part" v-if="treeState">
      <el-tree
        :data="listTree"
        ref="refTree"
        :default-expand-all="true"
        :props="defaultProps"
        @node-click="handleCheckChange"
      >
        <template #default="{ node, data }">
          <div
            :title="data.label"
            :class="['custom-tree-node ellipsis flex-y-center']"
            style="height: 30px"
          >
            {{ data.label }}
          </div>
        </template>
      </el-tree>
    </div>
    <div class="scrollbar-y-bigscreen btn-part" v-else>
      <div class="tab-part">
        <el-button
          type="primary"
          size="mini"
          class="btnItem flex-both-center pointer"
          @click="getTabItem(item)"
          v-for="(item, index) in listTree"
          :key="index"
        >
          {{ item.label }}
        </el-button>
      </div>
      <div class="tab-ctn">
        <el-button
          type="primary"
          size="mini"
          class="btnItem flex-both-center pointer"
          @click="getTabItem(item)"
          v-for="(item, index) in btnList"
          :key="index"
        >
          {{ item.label }}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import PinyinMatch from "pinyin-match";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import config_list from "@public/config_list.json";
const router = useRouter();
const route = useRoute();
let listTree = ref([]);
listTree.value = config_list;

listTree.value.map((item) => {
  if (item.children) {
    item.children.map((item1) => {
      item1.parent = item.label;
    });
  } else {
    item.parent = null;
  }
});
let btnList = ref(listTree.value[0].children);
let defaultProps = {
  children: "children",
  label: "label",
  value: "label",
};
let selectResult = ref(null);
let treeState = ref(false);
onMounted(() => {});
const filterMethod = (value, data) => {
  if (!value) return true;
  return PinyinMatch.match(data.label, value);
};
const handleCheckChange = (item, obj) => {
  // 打开新页面
  const { href } = router.resolve({
    name: "md_ctn",
    query: item,
  });
  window.open(href, "_blank");
  // router.push({
  // 	path: "/md_ctn",
  // 	query: item,
  // });
};
// 路由跳转

const getTabItem = (item) => {
  if (item.children) {
    btnList.value = item.children;
  } else {
    // router.push({
    // 	path: "/md_ctn",
    // 	query: {
    // 		label: item.label,
    // 		parent: item.parent,
    // 	},
    // });
    const { href } = router.resolve({
      name: "md_ctn",
      query: {
        label: item.label,
        parent: item.parent,
      },
    });
    window.open(href, "_blank");
  }
};
// const turnSystem = (item) => {
// 	if (item.windowState) {
// 		window.open(item.path);
// 	} else {
// 		router.push({
// 			path: "/md_ctn",
// 			query: item,
// 		});
// 	}
// };
</script>
<style scoped lang="scss">
.loginBase {
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #282c34;
  .btnItem {
    margin-right: 10px;
    color: #fff;
  }
  .tree-part {
    width: 100%;
    height: calc(100% - 100px);
    border: 1px solid lightblue;
    border-radius: 10px;
    margin-top: 10px;
  }
  .btn-part {
    width: 100%;
    height: calc(100% - 100px);
    margin-top: 10px;
    .tab-part {
    }
    .tab-ctn {
      margin-top: 10px;
    }
  }
}

:deep(.el-tree) {
  background: transparent;
  max-height: calc(100% - 115px);
  // 左侧三角 start
  .el-icon-caret-right:before {
    content: "";
  }
  .custom-tree-node {
    // .side-bar {
    // 	width: 4px;
    // 	height: 26px;
    // 	position: relative;
    // 	left: -10px;
    // 	opacity: 0;
    // 	z-index: 10;
    // 	border-bottom: 4px solid transparent; /* 梯形的高度 */
    // 	border-top: 4px solid transparent; /* 梯形的高度 */
    // 	border-left: 4px solid rgba(132, 197, 255, 1); /* 左边斜面的宽度 */
    // 	height: 36px;
    // }
    // .icon-tree {
    // 	transform: rotate(-90deg);
    // }
  }
  .is-expanded {
    .custom-tree-node {
      .icon-tree {
        transform: rotate(0deg);
      }
    }
  }
  // 左侧三角 end

  .el-checkbox {
    position: absolute;
    right: 0;
  }
  .el-tree-node__content {
    height: 36px;
    &:hover {
      background-color: transparent;
    }
  }
  .el-tree-node {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
  }
  // hover 背景色
  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }

  [aria-checked="true"] {
    .side-bar {
      opacity: 1;
    }
  }

  .is-checked {
    color: #ffffff;
    .el-tree-node__content {
      border-bottom: 1px solid #86bfff;
      background: linear-gradient(
        90deg,
        rgba(77, 169, 214, 0.8),
        rgba(77, 169, 214, 0) 100%
      );
    }
    .el-tree-node__children {
      background: linear-gradient(
        90deg,
        rgba(77, 169, 214, 0.6) 0%,
        rgba(77, 169, 214, 0) 100%
      );
      .el-tree-node__content {
        background: rgba(1, 222, 225, 0);
      }
    }
  }
  .el-tree-node__children {
    .is-checked {
      .el-tree-node__content {
        border-bottom: none;
      }
    }
  }

  .el-tree-node__expand-icon {
    font-size: 14px;
    font-weight: bold;
    // color: transparent;
    // width: 0px;
    padding: 5px;
    // background-repeat: no-repeat;
  }
  .el-checkbox__inner {
    width: 16px;
    height: 16px;
    // background: url("@image/map/layer_list/check_no.png") !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border: none;
    &::after {
      display: none;
    }

    &::before {
      background-color: transparent !important;
    }
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    // background: url("@image/map/layer_list/check_yes.png") !important;
  }
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    // background: url("@image/map/layer_list/check_half.png") !important;
    background-size: 100% 100%;
  }
}
</style>
